<template>
	<view>
		<view class="box" :style="{backgroundColor:(targgetId==2?'#ffffff':'')}">
			<block>
				<view class="fulNew">
					<view style="width: 260rpx;">
						型号
					</view>
					<view style="flex: 1;">
						<input type="text" v-model="info.marking" style="padding: 0rpx;" placeholder="请输入配件型号" />
					</view>
				</view>
				<view class="fulNew">
					<view style="width: 260rpx;">
						名称
					</view>
					<view style="flex: 1;">
						<input type="text" v-model="info.name" style="padding: 0rpx;" placeholder="请输入名称" />
					</view>
				</view>
				<view class="fulNew">
					<view style="width: 260rpx;">
						备件号
					</view>
					<view style="flex: 1;">
						<input type="text" v-model="info.spare" style="padding: 0rpx;" placeholder="请输入备件号" />
					</view>
				</view>
				<view class="fulNew">
					<view style="width: 260rpx;">
						序列号
					</view>
					<view style="flex: 1;">
						<input type="text" v-model="info.serial" style="padding: 0rpx;" placeholder="请输入序列号" />
					</view>
				</view>
				<view class="fulNew">
					<view style="width: 260rpx;">
						品牌
					</view>
					<view style="flex: 1;">
						<input type="text" v-model="info.pinpai" style="padding: 0rpx;" placeholder="请输入品牌" />
					</view>
				</view>
				<view class="fulNew">
					<view style="width: 260rpx;">
						供应商
					</view>
					<view style="flex: 1;">
						<input type="text" v-model="info.supplier" style="padding: 0rpx;" placeholder="请输入供应商" />
					</view>
				</view>
				<view class="fulNew">
					<view style="width: 260rpx;">
						数量
					</view>
					<view style="flex: 1;">
						<input type="number" v-model="info.num" style="padding: 0rpx;" placeholder="请输入数量" />
					</view>
				</view>
				<view class="fulNew">
					<view style="width: 260rpx;">
						单价
					</view>
					<view style="flex: 1;">
						<input type="digit" v-model="info.price" style="padding: 0rpx;" placeholder="请输入单价" />
					</view>
				</view>
				<view class="fulNew">
					<view style="width: 260rpx;">
						总价
					</view>
					<view style="flex: 1;">
						<input type="number" v-model="(info.num*info.price).toFixed(2)" style="padding: 0rpx;" disabled=""
							placeholder="0" />
					</view>
				</view>

				<view class="fulNew">
					<view style="width: 260rpx;">
						是否有票据
					</view>
					<view style="flex: 1;">
						<radio-group @change="changeFactory">
							<label>
								<radio :value="2" :checked="2 == info.is_bill" /> 是
							</label>
							<label style="margin-left: 20px;">
								<radio :value="1" :checked="1 == info.is_bill" /> 否
							</label>
						</radio-group>
					</view>
				</view>
				<view style="height: 20rpx;"></view>
				<view class="programme-img">
					<view class="programme-img-title">
						上传图片
					</view>
					<view class="programme-img-desp">
						请确保图片可见
					</view>
					<view class="upimg">
						<view class="upimg-btn" v-for="(item,index) in imgs_list" :key="index">
							<view class="upimg-btn-wen">
								图片
							</view>
							<image @tap="previewImage(index)" :src="item" mode="" style="width: 100%;height: 100%;">
							</image>
							<view class="del_img" @tap="delImg(index)">
								<image src="../../static/del.png" mode=""></image>
							</view>
						</view>
						<view class="upimg-btn" @tap="upImg()">
							<image class="upimg-btn-bgImg" style="z-index: 9999;top: 20rpx;"
								src="../../static/detail/upimgBtnImg.png" mode=""></image>
							<view class="upimg-btn-tishi">
								点击上传图片
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<button-btm :targgetId='targgetId'>
			提交
		</button-btm>
	</view>
</template>

<script>
	import FyPicker from '@/components/fy-picker/fy-picker.vue'
	import buttonBtm from '@/components/button-btm.vue'
	import baseUrl from '@/request/baseUrl.js'
	export default {
		components: {
			buttonBtm,
			FyPicker
		},
		data() {
			return {
				info: {
					num: 0,
					price: 0,
					is_bill: 2
				},
				imgs_list: [], //传的图片数组
				targgetId: -1, //tabbar id
			}
		},
		onLoad() {

		},
		methods: {
			changeFactory(e) {
				this.info.is_bill = e.detail.value;
			},
			/*添加成本申报   成本申报 */
			btnJump() {
				this.info.image = this.imgs_list.join(',')
				this.info.amnout = (this.info.num * this.info.price).toFixed(2)
				this.$https.post('/accessory/add', this.info).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
			},
			/* 添加报价  判断每一项是否都存在 */
			isExistence(json) {
				let flag = true
				for (let i = 0; i < json.length; i++) {
					let item = json[i];
					for (let key in item) {
						if (!item[key]) {
							flag = false
						}
					}
				}
				return flag
			},
			/*添加勘察记录  图片预览 */
			previewImage: function(index, type) {
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.imgs_list //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			/*添加勘察记录  删除照片 */
			delImg(i) {
				this.imgs_list.splice(i, 1)
			},
			/*添加勘察记录 图片上传 */
			upImg(type) {
				const token = uni.getStorageSync('userInfo').token
				let _this = this;

				// uni.chooseLocation({
				// 	success: (openRes) => {

						wx.chooseImage({
							sourceType: ["album", "camera"],
							count: 9,
							success: (res) => {
								const img_length = res.tempFiles.length + this.imgs_list.length
								// if (img_length > 9) {
								// 	uni.showToast({
								// 		title: '最多上传9张图片',
								// 		duration: 1500,
								// 		icon: 'none'
								// 	})
								// } else {
								// let addsy_txt = openRes.address + openRes.name

								res.tempFilePaths.forEach(item => {
									uni.uploadFile({
										url: `${baseUrl}api/common/upload`, //仅为示例，非真实的接口地址
										filePath: item,
										name: 'file',
										formData: {
											token: token,
											// addsy_txt
										},
										success: (res1) => {
											let img_data = JSON.parse(res1
												.data)
											if (img_data.code == 0) {
												uni.showToast({
													title: img_data
														.msg,
													duration: 1500,
													icon: 'error'
												})
											} else {
												var img = img_data.data.fullurl
											}

											this.imgs_list.push(
												img)

										},
										fail: res3 => {
											uni.showToast({
												title: '上传失败',
												duration: 1500,
												icon: 'error'
											})
										}
									});
								})
							},
							fail: res => {
								uni.showToast({
									title: '图片上传失败，请重试！',
									icon: 'none',
									duration: 1500
								})
							}
						})
					},
				// 	fail: (err) => {
				// 		console.log('err', err);
				// 	}
				// });
			// },
		}
	}
</script>

<style lang="scss" scoped>

	.box {
		padding-bottom: 200rpx;
		background-color: #f6f7fb;
		min-height: 100vh;
	}

	.programme-img {
		padding: 46rpx 32rpx;
		background-color: #FFFFFF;

		.upimg {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			text-decoration: none;

			.del_img {
				position: absolute;
				top: -16rpx;
				right: -16rpx;
				width: 32rpx;
				height: 32rpx;
				z-index: 999;
				background-color: #FFFFFF;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.upimg-btn {
				/* width: 30%;
				height: 200rpx; */
				width: 128rpx;
				height: 128rpx;
				background-color: #f6f7fb;
				margin-right: 58rpx;
				position: relative;
				margin-bottom: 20rpx;

				image {
					z-index: -99;
					border-radius: 10rpx;
					overflow: hidden;
				}

			}

			.upimg-btn:nth-child(4n) {
				margin-right: 0rpx;
			}
		}

		.upimg::after {
			// 使用伪类元素占据单位，不影响页面
			content: "";
			height: 0;
			width: 128rpx;
		}

		.programme-img-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #303030;
		}

		.programme-img-desp {
			font-size: 24rpx;
			font-weight: 400;
			color: #969699;
			margin: 12rpx 0 24rpx;
		}
	}

	.fulNew {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		line-height: 100rpx;
		color: #3B3D3D;
		font-weight: 500;
		padding: 0 20rpx;
		border-bottom: 2rpx solid #f6f7fb;
		background-color: #fff;
		font-size: 28rpx;
	}

	.upimg-btn-wen {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 56rpx;
		height: 28rpx;
		line-height: 28rpx;
		background: #FF6619;
		border-radius: 4rpx 0rpx 8rpx 0rpx;
		z-index: 999999;
	}

	.upimg-btn-bgImg {
		position: absolute;
		top: 44rpx;
		left: 50%;
		width: 38rpx;
		height: 38rpx;
		margin-left: -19rpx;
	}

	.upimg-btn-tishi {
		position: absolute;
		font-size: 16rpx;
		font-weight: 400;
		color: #969699;
		width: 96rpx;
		left: 50%;
		margin-left: -48rpx;
		text-align: center;
		bottom: 24rpx;
	}

</style>